@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Font Configution */

  :root,
  html {
    @apply scroll-smooth text-[12px] sm:text-[14px] lg:text-[16px];
  }

  html body {
    @apply flex min-h-screen flex-col font-mono text-base font-normal antialiased bg-bg-1 text-text-primary-1;
  }

  .tag {
    @apply bg-primary px-1 py-0 text-bg-1 font-semibold text-sm;
  }

  .tag:before {
    content: '#';
  }

  .tag a {
    @apply no-underline;
  }

  .cody-link {
    @apply bg-[size:100%_6px] bg-bottom bg-repeat-x w-fit;
  }

  .cody-bg {
    @apply p-4 bg-surface;
  }

  .cody-copy-code {
    @apply absolute top-2 right-2 bg-primary text-bg-1 p-0.5 border border-primary hover:bg-bg-1 hover:text-primary transition-all duration-200 text-sm;
  }

  .title:before {
    content: '#';
    @apply mr-2 text-text-primary-2;
  }

  .title {
    @apply font-bold mb-4;
  }

  hr {
    @apply border-primary border-dashed my-6;
  }

  ::selection {
    @apply bg-primary text-bg-1;
  }

  ::-moz-selection {
    @apply bg-primary text-bg-1;
  }

  .fade-in {
    @apply transition-opacity duration-700 ease-in opacity-100 duration-700;
  }

  .fade-out {
    @apply transition-opacity duration-700 ease-in opacity-0 duration-700;
  }

  /* H 标题 */
  h1 {
    @apply text-[2.75rem] font-normal leading-[1.3];
  }
  h2 {
    @apply text-[2.5rem] font-normal leading-[1.3];
  }
  h3 {
    @apply text-[1.75rem] font-normal leading-[1.4];
  }
  h4 {
    @apply text-[1.5rem] font-normal leading-[1.4];
  }
  h5 {
    @apply text-[1.25rem] font-normal leading-[1.4];
  }

  .c-content {
    @apply px-8 w-full md:px-0 md:w-[1180px] lg:w-[1420px];
  }
  
  .scrollbar-hidden {
    scrollbar-color: auto !important;
  }
  .scrollbar-hidden:hover {
    scrollbar-color: auto !important;
  }
  
  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }

  a:focus-visible{
    outline: 0px;
  }
}

/* 注册自定义字体 */
@font-face {
  font-family: 'WenQuanYiBitmapSong';
  src: url('/fonts/dianzhensongti.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
